<template>

  <el-row class="home" :gutter="20" style="display:flex;height:800px;margin-top:10px;">
    <el-col style="width: 400px;padding: 0px;">
      <el-col style="width: 400px;padding: 0px;">
        <!-- 用户信息卡 -->
        <el-card class="box-card" style=" margin-top: 10px; width: 400px;">
          <div style="display: flex;align-items: center;">
            <img src="../../src/assets/img/OIP-C.jpg" alt="" width="100px" height="100px" style="border-radius:50%;margin: 10px 10px;
                    ">
            <div style="margin-left:25px;">
              <p style="font-size:22px;margin-bottom: 0px;margin-top:15px ;">不想蒋话了</p>
              <p style="color:gray;font-size: 14px;margin-top:5px ;">超级管理员</p>
            </div>

          </div>
          <hr>
          <div style="margin-top:20px;margin-left: 10px;color: gray;">

            <p>上次登录时间：2022-07-23</p>
            <p>上次登录地点：广东</p>
          </div>
        </el-card>
      </el-col>
      <!-- 用户信息卡 -->
      <!-- 销售总表格 -->
      <el-col style="padding:0;margin-top: 10px;">
        <el-card style="margin-top:10px;width: 400px;">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="daysell" label="日销售量">
            </el-table-column>
            <el-table-column prop="monsell" label="月销售量">
            </el-table-column>
            <el-table-column prop="total" label="总销售量">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-col>
    <!-- 销售总表格 -->
    <!-- 订单信息-->
    <el-col :span="18" style="margin-top:10px;padding: 0;width: 100%;margin-left: 10px;">
      <div style="display:flex;height: 100px;width: 100%; ">
        <el-card class="card" v-for="(item, index) in tabData" :key="index"
          :body-style="{ display: 'flex', height: '80px', width: tabwidth, padding: '0px'}">
          <div
            style="font-size:40px;display: inline-flex;align-items: center;color: white;margin-top: 20px;margin-left: 15px;">
            <i :class="'el-icon-' + item.icon"
              :style="{ 'background-color': item.color, height: '80px', width: '80px', 'line-height': '80px' }"></i>
          </div>
          <div style="padding-left:20px;line-height: 32px;">
            <p style="margin:0;font-size: 26px;padding-top: 26px;">￥{{ item.value }}</p>
            <p style="margin:0;color: gray;font-size: 14px;">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <!-- 订单信息 -->
      <!-- 图biao -->
      <div style="margin-right: 15px; margin-top: 13px;">
        <el-card style="height:300px;margin: 10px 0px;margin-left:5px;width: 100%;">
        <div style="height: 300px; width: 100%;" ref="echarts"></div>
      </el-card>
      </div>
      
      <div style="margin:-5px ;height:330px;margin-left:5px;
      display: flex;justify-content: space-between;margin-right: 8px;margin-top: 12px;">
        <el-card style="height:330px;width: 100%;">
              <div ref="userecharts" style="height:330px "></div>
        </el-card>
        <el-card style="height:330px;width: 100%;margin-left: 15px;">
             <div ref="bingtu" style="height:330px "></div>
        </el-card>
      </div>
      <!-- 图标 -->
    </el-col>





  </el-row>


</template>

<script>
import { getData } from '../../api/data'
import * as echarts from 'echarts'


export default {
  name: 'MyHome',
  data() {
    return {
      taData:[],
      tableData: [
        {
          name: '显示屏',
          daysell: '200',
          monsell: '2000',
          total: '8943'
        }, {
          name: '手机',
          daysell: '354',
          monsell: '896',
          total: '32458'
        }, {
          name: '电脑',
          daysell: '23',
          monsell: '89',
          total: '3452'
        }, {
          name: '支架',
          daysell: '34',
          monsell: '90',
          total: '3456'
        }, {
          name: '音响',
          daysell: '9',
          monsell: '45',
          total: '457'
        }, {
          name: '充电器',
          daysell: '4',
          monsell: '53',
          total: '4567'
        }, {
          name: '鼠标',
          daysell: '43',
          monsell: '50',
          total: '453'
        }, {
          name: '电蚊拍',
          daysell: '457',
          monsell: '6589',
          total: '453637'
        }
      ],
      tabData: [
        {
          name: '今天支付订单',
          value: '576',
          icon: 'success',
          color: '#2ec7c9'
        }, {
          name: '今天收藏订单',
          value: '58',
          icon: 'star-on',
          color: '#ffb980'
        }, {
          name: '今天未支付订单',
          value: '9',
          icon: 's-goods',
          color: '#5ab1ef'
        }
      ]
    }
  },
  computed: {
    tabwidth() {
      return this.$store.state.tab.isCollapse ? '280px' : ''

    }
  },
  mounted() {
      getData().then(res=>{
        const {code, data} = res.data
        //  console.log(res)
        if(code===2000){      
          this.taData = data.tableData
          const order = data.orderData
          const xData = order.date
          const keyArray = Object.keys(order.data[0])
          const series = []
         
          keyArray.forEach(key=>{
            series.push({
              name:key,
              data:order.data.map(item=>item[key]),
              type:'line'
            })

          })
         
          const option = {
            tooltip:{
              trigger:'axis'
            },
             grid:{
               left:'6%',
              right:'2%'
              },
            xAxis:{
              data:xData
            },
            yAxis:{},
            legend:{
              data:keyArray
            },
            series
          }     
          const EC = echarts.init(this.$refs.echarts)
          EC.setOption(option)
      //  console.log('data',data)
    //  用户
      const useroption = {
        legend:{
          // 图例
          textStyle:{
            color:'#333',
          }
        },
        grid:{
            left:'10%',
            right:'5%'
        },
        // tips
        tooltip:{
            trigger:'axis'
        },
        xAxis:{
          type:'category',
          data:data.userData.map(item=>item.data),
          axisLine:{
            lineStyle:{
              color:'#17b3a3'
            } 
          },
          axisLabel:{
            interval:0,
            color:'#333'
          }
        },
        yAxis:[
          {
            type:'value',
            axisLine:{
              lineStyle:{
                color:"#17b3a3"
              }
            }
          }
        ],
        color:['#2ec7c9','#b6a2de'],
        series:[
          {
            name:'新增用户',
            data:data.userData.map(item=>item.new),
            type:'bar'
          },
          {
            name:'活跃用户',
            data:data.userData.map(item=>item.active),
            type:'bar'
          }
        ],

      }
      echarts.init(this.$refs.userecharts).setOption(useroption)
    // 饼图
      const videoption = {
      
        tooltip:{
          trigger:'item',
        },
        color:[
          "#1685a9",
          "#ff4777",
          "#0eb83a",
          "#3b2e7e",
          "#e9bb1d",
          "#3d3b4f",
          "#e0f0e9",
        ],
        series:[
          {
            name:'市场份额占比',
            data:data.videoData,
            type:'pie'
          }
        ]

        
      }

       echarts.init(this.$refs.bingtu).setOption(videoption)
// if函数
        }
      })

  }
}
</script>

<style lang="less" scoped>

.card.el-card.is-always-shadow {
  flex: 1;
  height: 100px;
  // max-width: 350px;
  margin-left: 5px;
  padding: 0px;
  // min-width: 290px;
}

.el-icon-success:before {
  line-height: 80px;
  padding: 20px;
}

.el-icon-star-on:before {
  line-height: 80px;
  padding: 20px;
}

.el-icon-s-goods:before {
  line-height: 80px;
  padding: 20px;
}
</style>